
page-tabs {
    .ion-tab-icon-base {
        width: 21px !important;
        height: 21px !important;
    }
    .ion-tab-icon-md-base {
        min-width: 0 !important;
        height: 21px;
    }
  
    $tabImageName: 'home''service''ranking''my';
  
    @for $i from 1 to 5 {
        //for ios
        .ion-ios-tab-#{nth($tabImageName, $i)} {
            @extend .ion-tab-icon-base;
            content: url("../assets/imgs/tab-icon/#{nth($tabImageName, $i)}2.png");
        }
    
        .ion-ios-tab-#{nth($tabImageName, $i)}-outline {
            @extend .ion-tab-icon-base;
            content: url("../assets/imgs/tab-icon/#{nth($tabImageName, $i)}.png");
        }
    
        // for android
        .tabs-md .tab-button[aria-selected=true] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../assets/imgs/tab-icon/#{nth($tabImageName, $i)}2.png");
            }
        }
    
        .tabs-md .tab-button[aria-selected=false] {
            .ion-md-tab-#{nth($tabImageName, $i)} {
                @extend .ion-tab-icon-md-base;
                content: url("../assets/imgs/tab-icon/#{nth($tabImageName, $i)}.png");
            }
        }
    }
  
    .ion-ios-tab-task,
    .ion-ios-tab-task-outline,
    .ion-ios-tab-master,
    .ion-ios-tab-master-outline {
        width: 21px !important;
        height: 21px !important;
    }

    @keyframes Scale {
        from {
            transform: scale(.8, .8)
        }

        to {
            transform: scale(1.1, 1.1)
        }
    }

    .tabs-ios .tab-button[aria-selected=true] .tab-button-icon {
        color: $tab-color;
        animation: Scale .3s linear;
    }

    .tabs-ios .tab-button:hover:not(.disable-hover),
    .tabs-ios .tab-button[aria-selected=true] {
        color: $tab-color;
        animation: Scale .3s linear;
    }

    .tabs-ios .tab-button-icon {
        min-width: 21px !important;
    }

    .tabs-ios .tab-button {
        max-width: 240px;
        min-height: 46px;
        font-size: 10px;
        font-weight: 500;
        color: #8c8c8c;
        padding: 0 2px;
    }

    .tabs-ios .tabbar {
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-top: none;
        background: #fff;
        box-shadow: 0px -1px 10px rgba($color: #000, $alpha: .1);
    }

}
